<template>
  <el-card style="width: 100%;margin-top: 10px;max-height: 80vh;overflow: auto;scrollbar-width: none;">
    <el-form size="default" :model="queryForm" ref="queryFormRef" label-width="90px">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="组织编码" prop="title">
            <el-input v-model="queryForm.socialCode" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="主管单位" prop="competentDept">
            <el-select v-model="queryForm.competentDept" placeholder="请选择" clearable @change="getAwardData">
              <el-option v-for="item in authorityOptions" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="宣传级别" prop="level">
            <el-select v-model="queryForm.level" placeholder="请选择" clearable>
              <el-option v-for="item in awardLevelOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="宣传标题" prop="title">
            <el-input v-model="queryForm.title" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="宣传年份" prop="examineYear">
            <el-date-picker v-model="queryForm.examineYear" style="width: 100%;" value-format="YYYY" type="year"
              placeholder="请选择年份">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="getAwardData">查询</el-button>
          <el-button @click="clearForm">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :header-cell-style="{ background: '#F0F5FA', color: '#333333' }" :data="listAward" border
      style="cursor: pointer;margin-top: 10px;">

      <el-table-column type="index" label="序号" align="center" width="60" />
      <el-table-column prop="orgName" label="社会组织名称" align="center" :show-overflow-tooltip="true"/>
      <el-table-column prop="competentDeptName" label="主管部门" align="center" :show-overflow-tooltip="true"/>
      <el-table-column prop="mediaCoverage" label="宣传媒体" align="center" :show-overflow-tooltip="true"/>

      <el-table-column prop="title" label="宣传报道标题" align="center" :show-overflow-tooltip="true" />
      <!--      <el-table-column prop="type" label="宣传报道类型" align="center" width="140">-->
      <!--        <template #default="scope">-->
      <!--          <span>{{ awardFormatType(scope.row.type) }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column prop="level" label="宣传报道级别" align="center" width="160">
        <template #default="scope">
          <span>{{ awardFormatLevel(scope.row.level) }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column prop="level" label="宣传报道图片" align="center" width="140">-->
<!--        <template #default="scope">-->
<!--          <el-image v-if="scope.row.imgUrl" ref="imageRef" preview-teleported style="width: 40px; height: 40px"-->
<!--            :src="getAwardImage(scope.row.imgUrl)" :preview-src-list="getAwardImages(scope.row.imgUrl)" fit="cover" />-->
<!--          <span v-if="!scope.row.imgUrl"></span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="getTime" label="报道时间" align="center" />
<!--      <el-table-column prop="content" label="宣传报道内容" align="center" :show-overflow-tooltip="true" />-->
      <el-table-column  label="操作" align="center" width="140" fixed="right">
         <template #default="scope">
           <el-button type="text" @click="handleInfo(scope.row)">详情</el-button>
           <el-button type="text" @click="handleAwardDelete(scope.row.id)">删除</el-button>
         </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px;width: 100%;text-align: right;display: flex;justify-content: flex-end;">
      <el-pagination small v-model:current-page="queryForm.pageNum" :page-sizes="[10]" background
        layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="getAwardData" />
    </div>
  </el-card>
  <el-dialog v-model="infoDialog" title="报道详情" width="70%" >
    <AwardInfo :infoDetails="infoDetails" ></AwardInfo>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="infoDialog = false">关  闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import AwardInfo from '@/views/evaluate/report/awardInfo.vue'
import { computed, onMounted, ref, onUnmounted, reactive } from 'vue'
import { delAward, getAwardList } from '@/views/yearCheck/ykb/otherApi'
import { getAuthorityDept, getDictByCode } from '@/views/yearCheck/ykb/mf/mf'
import { ElMessage, ElMessageBox } from 'element-plus'

let infoDetails = ref({});
let infoDialog = ref(false);
let listAward = ref([]);
let awardTypeOptions = ref([{ id: "1", name: '报道' }, { id: "2", name: '宣传报道' }]);
let awardLevelOptions = ref([]);
let total = ref(0);
let queryForm = ref({
  pageNum: '1',
  pageSize: '10',
  examineYear: '',
  socialCode: '',
  competentDept:'',
  getTime: '',
  level: '',
  type: '2',
  title: ''
});
function clearForm() {
  queryForm.value = {
    pageNum: '1',
    pageSize: '10',
    examineYear: '',
    socialCode: '',
    getTime: '',
    competentDept:'',
    level: '',
    type: '2',
    title: ''
  }
  getAwardData();
}

function handleInfo(row){
  infoDetails.value = row;
  infoDialog.value = true;
}
function handleAwardDelete(id){
  ElMessageBox.confirm(
    '是否删除此记录?',
    '提示', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    }
  )
    .then(() => {
      delAward(id).then(response => {
        console.log(response)
        ElMessage({
          message: '删除成功',
          type: 'success'
        })
        getAwardData();
      })
    })
    .catch(() => {
    })
}
const getAwardData = () => {
  getAwardList(queryForm.value).then(response => {
    console.log(response)
    listAward.value = response.rows
    total.value = response.total
  })
}
const authorityOptions = ref([]);
const getDict = () => {
  getDictByCode('reportRecord').then(response1 => {
    awardLevelOptions.value = response1.data
    getAwardData();
  })
  getAuthorityDept().then(response => {
    authorityOptions.value = response.data;
    // authorityOptions.value.push({"deptId":"GO_1560457202370744320","id":"65883","deptName": "云阳县工商联","parentId": "GO_1657988536883802112"});
  })
}
function getAwardImage(str) {
  if (str) {
    let images = JSON.parse(str)
    return images[0].response.data
  }
}
function getAwardImages(str) {
  if (str) {
    let images = JSON.parse(str)
    let imageUrls = []
    for (let i = 0; i < images.length; i++) {
      imageUrls.push(images[i].response.data)
    }
    return imageUrls
  }
}
function awardFormatLevel(str) {
  for (let i = 0; i < awardLevelOptions.value.length; i++) {
    if (awardLevelOptions.value[i].id == str) {
      return awardLevelOptions.value[i].name
    }
  }
  return str
}
function awardFormatType(str) {
  for (let i = 0; i < awardTypeOptions.value.length; i++) {
    if (awardTypeOptions.value[i].id == str) {
      return awardTypeOptions.value[i].name
    }
  }
  return str
}
getDict();
</script>
<style lang="scss" scoped></style>
